<template>
	<div class="users" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/授权管理/
				<span>用户管理</span>
			</div>
		</div>
		<div class="right_content" v-show="roleShow">
			<div class="userAddForm">
				<el-button type="primary" @click="addUserShowFun()" class="addUserBtn">
				<i class="el-icon-edit"></i>&nbsp
				添加用户
				</el-button>
				<div class="filter" >
					<el-input v-model="userVal" placeholder="请输入用户名搜索" icon="search"></el-input>
				</div>
			</div>
			<el-table
			:data="newUSers"
			border @sort-change="sortChange"
			style="width: 100%" @selection-change="handleSelectionChange" >
				<el-table-column align="center"
			      type="selection"
			      width="55">
			    </el-table-column>
				<el-table-column align="center"
				  label="ID" sortable  prop="id"
				  width="100">
					<template scope="scope">
						<i class="icon iconfont">&#xe7dd;</i>
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="用户名">
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-tag>{{ scope.row.username }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="所属部门" sortable>
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-tag>{{ scope.row.department }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="用户描述" sortable>
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-tag>{{ scope.row.description}}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center"
				  label="超级管理员" width="150px">
					<template scope="scope">
						<div slot="reference" class="name-wrapper">
							<el-checkbox v-model="scope.row.isAdmin" disabled>超级管理员</el-checkbox>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template scope="scope">
						<el-button
				      size="small"
				      @click="userEdit(scope.$index, scope.row)">修改用户</el-button>
						<el-button
				      size="small"
				      @click="handleEdit(scope.$index, scope.row)">编辑权限</el-button>
						<el-button
				      size="small"
				      type="danger"
				      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-button type="danger" @click="handleDeleteAll()" class="deleteBtn" v-show="deleteBtn">
				<i class="el-icon-delete"></i>&nbsp
				全部删除
			</el-button>
		</div>
		<!-- <div class="block realTimeServicePage">
			<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="dataTotal"></el-pagination>
		</div> -->
		<div class="addUserShade" v-show="addUserShow">
			<div class="addUserChoose">
				<div class="vicp-close"  @click="addUserShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="addUserForm" :rules="addRules" ref="addUserForm" label-width="100px" class="demo-ruleForm">
					<h5>添加用户</h5>
					<el-form-item label="用户名" prop="addUserName">
						<el-input v-model="addUserForm.addUserName"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="addUserPassword">
						<el-input v-model="addUserForm.addUserPassword" type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="addUserSurePassword">
						<el-input v-model="addUserForm.addUserSurePassword" type="password"></el-input>
					</el-form-item>
					<el-form-item label="所属部门" prop="addUserDepartment">
						<el-input v-model="addUserForm.addUserDepartment"></el-input>
					</el-form-item>
					<el-form-item label="超级管理员" prop="moudleIntro">
						<el-checkbox v-model="addUserForm.addUserIsAdmin"></el-checkbox>
					</el-form-item>
					<el-form-item label="用户描述" prop="moudleIntro">
						<el-input type="textarea" v-model="addUserForm.addUserDescription"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('addUserForm')">立即创建</el-button>
						<el-button @click="resetForm('addUserForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>
		<div class="userShade" v-show="userShow">
			<div class="userChoose" style="width:500px;">
				<div class="vicp-close"  @click="userShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="rules" ref="revampForm" label-width="200px" class="demo-ruleForm">
					<h5>修改用户</h5>
					<el-form-item label="用户名" prop="username">
						<el-input v-model="revampForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码（不修改请留空）">
						<el-input v-model="revampForm.password" type="password"></el-input>
					</el-form-item>
					<el-form-item label="所属部门" prop="department">
						<el-input v-model="revampForm.department"></el-input>
					</el-form-item>
					<el-form-item label="超级管理员">
						<el-checkbox v-model="revampForm.isAdmin">超级管理员</el-checkbox>
					</el-form-item>
					<el-form-item label="用户描述">
						<el-input type="textarea" v-model="revampForm.description"></el-input>
					</el-form-item>
					<el-form-item style="margin-left:-50px;">
						<el-button type="primary" @click="userRevamp('revampForm')">立即修改</el-button>
						<el-button @click="revampReset('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div> 
		</div>
		<div class="right_content revamp" v-if = "!roleShow">
			<el-button type="primary" @click="roleShow = !roleShow" style="margin-bottom:10px;">
				<i class="el-icon-d-arrow-left"></i>&nbsp
				返回列表
			</el-button>
			<div class="roleTree"> 
				<el-tree
				  :data="projectData"
				  :props="defaultProps"
				  node-key="id"
				  ref="tree"
				  default-expand-all
				  :expand-on-click-node="false"
				  :render-content="renderContent">
				</el-tree>
			</div>
		</div>
		<div class="configRoleShade" v-show="roleChooseShow">
			<div class="configRoleChoose" style="width:504px;">
				<div class="vicp-close"  @click="roleChooseShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<div class="roleChoose">
					<h5>
						选择角色
					</h5>
					<template>
					  <el-transfer 
					  		filterable 
					  		:filter-method="filterMethod" 
					  		filter-placeholder="请输入角色名称" 
					  		v-model="roleValue" 
					  		:props="{
						      key: 'id',
						      label: 'name'
						    }"
						    :left-default-checked="[]"
					  		:data="roleData"
					  		:titles="['全部角色', '已选角色']"
					  		@change="handleChange">
					  </el-transfer>
					</template>
					<div class="roleChooseSub">
						<el-button type="primary" @click="roleChooseSubmit()">立即提交</el-button>
						<el-button @click="roleChooseReset()">重置</el-button>
					</div>
				</div>
			</div> 
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./users.styl"></style>
<script src="./users.js"></script>
